<template>
  <!-- <div class="card-list">
    <Row v-for="row in list" :key="row.id" :row="row" />

  </div> -->
  

  <div>
        <!-- <h2>翻牌器动画：</h2>
        <CountFlop val="2017" /> -->
<!--  
        <h2>翻牌器自定义样式：</h2> -->
        <div class="myself">
            <CountFlop v-for="row in list" :key="row.id" :row="row" :val="row.data" suffix="个" />
        </div> 
    </div>
</template>

<script lang="js">
import CountFlop from '@/components/dashboard/components/card/CountFlop.vue'
import { defineComponent } from 'vue'
import Row from './row.vue'
export default defineComponent({
  components: {
    Row,
    CountFlop,
  },
  setup() {
    const list = [
      { id: 1, name: '设备绑定数', data: '10000', color: '#4e73df', icon: 'fas fa-file-alt' },
      { id: 2, name: '报告生成总数', data: '800', color: '#1cc88a', icon: 'fas fa-file-alt' },
      { id: 3, name: '今日报告生成数', data: '20000', color: '#36b9cc', icon: 'fas fa-file-alt' },
      { id: 4, name: '今日报告待生成数', data: '20,00', color: '#f6c23e', icon: 'fas fa-file-alt' }
    ]
    return {
      list
    }
  }
})
</script>

<style lang="scss" scoped>
  .card-list {
    width: calc(100% + 20px);
    margin-left: -10px;
    display: flex;
    flex-wrap: wrap;
  }
</style>